<!doctype html>
<html>
<head>
	<title>newfile</title>
	<meta charset="UTF-8"/>
	<style>
	 /*去除浏览器默认*/
	body{
		font-family:"Microsoft YaHei",serif;
	}
	body,dl,dd,p,h1,h2,h3,h4,h5,h6{
		margin:0;
	}
	ol,ul,li{
		margin:0;
		padding:0;
		list-style:none;
	}
	img{
		border:none;
	}
	a{
			text-decoration:none;/*去掉a标签超链接的下划线*/
	}
		
	/*   */
		/* css部分  */
		#box{
			width:200px;
			margin:60px auto;
			text-align:center;
		}
		#box ul {
			height:40px;
			overflow:hidden;
			border-bottom:1px solid #ffcc00;
		}
		#box ul li{
			height:100%;
			line-height:40px;
			color:#ffcc66;
			cursor:pointer;
			background-color:#660099;
			border-bottom:1px solid #6699ff; 
		}
		#box ul .on{
			background-color:#bbb;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li class="on">吃的</li>
			<li>粮食</li>
			<li>水果</li>
			<li>蔬菜</li>
		</ul>
		<ul>
			<li class="on">交通工具</li>
			<li>公交</li>
			<li>过车</li>
			<li>飞机</li>
		</ul>
		<ul>
			<li class="on">穿的</li>
			<li>上衣</li>
			<li>鞋子</li>
			<li>裤子</li>
		</ul>
	</div>
</body>

	<script>
		var oUl=document.getElementsByTagName("ul");
			for(var i=0;i<oUl.length;i++){
				oUl[i].bool=true;
				oUl[i].onclick=function(bool){
					if(this.bool){
						for(var b=0;b<oUl.length;b++){
							oUl[b].style.height="40px";
							oUl[b].bool=true;
						}
						this.style.height="auto";
						this.bool=!this.bool;
					}else{
						this.style.height="40px";
						this.bool=!this.bool;
					}

				}
			}

					/* bug 说明：此为点击ul，点击ul内部的li的时候也会关闭     */
	</script>
</html>